import React from 'react';
import { useLocation } from 'react-router-dom';
import Chatapp from '../components/Chatapp'
import { LeftOutline } from 'antd-mobile-icons'
interface UserProfileProps {
    username?: string;
    avatar?: string;
    followers?: number;
    following?: number;
    zan?: number;
    share?: number;
}

const UserProfile: React.FC<UserProfileProps> = () => {
    const { state: { item } } = useLocation();
    return (
        <div style={{
            margin: '0 auto',
            padding: '0.2rem',
            backgroundColor: '#fff',
            fontFamily: 'Arial, sans-serif'
        }}>
            {/* Header */}
            <div style={{
                display: 'flex',
                alignItems: 'center',
                marginBottom: '0.2rem',
                padding: '0.1rem',
            }}>
                <div>
                    <LeftOutline style={{ fontSize: "0.2rem", marginLeft: "-0.1rem" }} onClick={() => {
                        window.history.back();
                    }} />
                </div>
                <div style={{
                    display: 'flex',
                    alignItems: 'center',
                    flex: 1
                }}>
                    <div style={{ display: "flex", position: "relative" }}>
                        <img
                            src={item.img}
                            alt="用户头像"
                            style={{
                                width: '0.32rem',
                                height: '0.32rem',
                                borderRadius: '50%',
                                marginRight: '0.1rem'
                            }}
                        />

                        <div style={{
                            width: '0.08rem',
                            height: '0.08rem',
                            backgroundColor: '#4CAF50',
                            borderRadius: '50%',
                            marginLeft: '0.05rem',
                            position: "absolute",
                            bottom: "0rem",
                            right: "0.11rem"
                        }} />
                    </div>

                    <span style={{
                        fontSize: '0.16rem',
                        fontWeight: 500,
                        color: '#333'
                    }}>
                        {item.name}
                        
                    </span>
                </div>
                <div style={{
                    color: '#666',
                    fontSize: '0.2rem',
                    cursor: 'pointer',
                    marginBottom: "0.1rem"
                }}>
                    ...
                </div>
            </div>

            {/* Question Input */}
            <Chatapp data={item} />
        </div>
    );
};

export default UserProfile;